<template>
  <div>
    <el-button style="margin: 20px 0 0 20px;" size="default" @click="backNext">返回</el-button>
    <el-row class="form_box">
      <el-col :span="20">
        <div class="from-sub-title">基本信息</div>
        <div class="user_info_box">
          <div class="user_info_headImg">
            <img style="width:100%;height: 100%;" :src="userDetail.headImg" />
          </div>
          <div class="user_info">
            <el-row>
              <el-col :span="8">昵称：{{ userDetail.nickname }}</el-col>
              <el-col :span="8">手机号：{{ userDetail.phone }}</el-col>
              <el-col :span="8">会员等级：{{ levelOption[userDetail.vipLevel] }}</el-col>
            </el-row>
            <el-row style="margin-top:16px;">
              <el-col :span="8">状态：{{ userDetail.status==1?'正常':'已禁用' }}
                <el-button :type="userDetail.status === 1 ? 'danger' : 'primary'" @click="setStatus(userDetail.status)" size="default" style="margin-left: 12px;">{{ userDetail.status==1?'停用账号':'启用账号' }}</el-button>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col :span="20" style="margin-top:24px;">
        <div class="from-sub-title">账户资产</div>
        <el-row :span="12">
          <el-col :span="12">收益余额：{{ userDetail.income }}</el-col>
          <el-col :span="12">账户余额：{{ userDetail.money }}</el-col>
        </el-row>
        <el-row :span="12" style="margin-top:10px;">
          <el-col :span="12">订阅储值余额：{{ userDetail.subscribe }}</el-col>
          <el-col :span="12">积分余额：{{ userDetail.integral }}</el-col>
        </el-row>
        <div style="margin-top:20px;">
          <el-button type="primary" size="default" @click="handleAdd('4')">调整收益</el-button>
          <el-button type="primary" size="default" @click="handleAdd('1')">调整账号</el-button>
          <el-button type="primary" size="default" @click="handleAdd('3')">调整订阅</el-button>
          <el-button type="primary" size="default" @click="handleAdd('2')">调整积分</el-button>
        </div>
      </el-col>
    </el-row>
    <el-dialog v-model="showDialog" :title="'调整'+dialogTitle" width="600">
        <el-form ref="refForm" :model="formData" size="default">
          <el-form-item :label="'现有'+dialogTitle" label-width="120px">
            {{ formData.changeType=='1'?userDetail.money:formData.changeType=='2'?userDetail.integral:formData.changeType=='3'?userDetail.subscribe:formData.changeType=='4'?userDetail.income:userDetail.money }}
          </el-form-item>
          <el-form-item label-width="120px">
            <div class="flex_items_box">
              <div style="margin-right:10px">
                <div>
                  <el-radio v-model="formData.ieType" :value="1" size="default">增加</el-radio>
                </div>
                <div>
                  <el-radio v-model="formData.ieType" :value="2" size="default">减少</el-radio>
                </div>
              </div>
              <div><el-input-number v-model="formData.num" :min="0" :step="1" :controls="false" placeholder="请输入调整数额" /></div>
            </div>
          </el-form-item>
          <el-form-item label="调整原因" label-width="120px" required>
            <el-input v-model="formData.reason" type="textarea" :maxlength="200" show-word-limit placeholder="请输入调整原因" autocomplete="off" />
          </el-form-item>
          <el-form-item label="凭证" label-width="120px" required>
            <FileUpload
              v-model="formData.imgList"
              :isShowTip="false"
              :limit="10"
              :fileType="[]"
              listType="picture-card"
            >
            </FileUpload>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="showDialog = false" size="default">取消</el-button>
            <el-button type="primary" @click="handleSubmit" size="default">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import router from '@/router'
import { getUser,appUserChange,appUserSave } from "@/api/member";
import useTagsViewStore from '@/store/modules/tagsView'

const { proxy } = getCurrentInstance();
// 状态管理
const showDialog = ref(false)
const formData = ref({})
const dialogTitle = ref('')
const specList = ref([])
const id = proxy.$route.query.id
const userDetail = ref({})
const levelOption = {
  1:'普通会员',
  2:'蓝卡会员',
  3:'红卡会员',
  4:'黑卡会员',
}

const getDetail = ()=>{
  getUser({ id:id }).then(res => {
    let data =res.data || {}
    userDetail.value = data
  })
}
if (id ) {
  getDetail()
}
/** 打开新增弹窗 */
const handleAdd = (changeType) => {
  let obj ={
    '1':'账号余额',
    '2':'积分余额',
    '3':'订阅值余额',
    '4':'收益余额',
  }
    dialogTitle.value = obj[changeType]
    // 重置表单数据
    formData.value = {
      "changeType": changeType,
      "ieType": 1,
      "num": 0,
      "reason": "",
    }
    showDialog.value = true
  }
onMounted(() => {
  // 初始化逻辑
})
const handleSubmit = async () => {
   try {
    let params = {
      ...formData.value,
      imgList:formData.value.imgList?.split(',') || [],
      userId:id,
    }
    if(params.num==0){
      proxy.$modal.msgError("请输入金额")
      return
    }
    if(!params.reason){
      proxy.$modal.msgError("请输入调整原因")
      return
    }
    if(!params.imgList.length){
      proxy.$modal.msgError("请上传凭证")
      return
    }
     // 这里调用API进行提交
     await appUserChange(params)
     showDialog.value = false
     proxy.$modal.msgSuccess("操作成功")
     getDetail()
   } finally {
    //  loading.value = false
   }
  }
  /** 删除按钮操作 */
function setStatus(status) {
  proxy.$modal.confirm('是否'+(status==1?'停用账号':'启用账号')+'？').then(function() {
    appUserSave({id: id, status: status==1?2:1}).then(() => {
     proxy.$modal.msgSuccess(status==1?'停用成功':'启用成功')
     getDetail()
   })
 })
}
  const backNext = () => {
      useTagsViewStore().delView(router.currentRoute.value)
      router.go(-1)
  }

</script>

<style lang="scss" scoped>
// ::v-deep .el-upload--picture-card{
//   width:44px;
//   height:44px;
//   display: flex;
//   justify-content: center;
//   align-items: center;
// }
:deep(.sku-img-wrap) {
  .el-upload--picture-card,.el-upload-list--picture-card .el-upload-list__item-actions,.el-upload-list--picture-card .el-upload-list__item{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
  }
}
:deep(.el-step__title){
    font-size: 14px;
  }
  :deep(.sku-img-wrap .el-upload-list--picture-card .el-upload-list__item-actions span+span){
    margin-left:4px;
  }
  :deep(.sku-img-wrap .el-upload-list__item-actions .el-icon){
  font-size: 14px;
}
:deep(th.platId-column .cell:before) {
    color: var(--el-color-danger);
    content: "*";
    margin-right: 4px;
}
:deep(.hide .el-upload--picture-card) {
    display: none;
}
// el-table_5_column_29 platId-column el-table__cell
.step_box{
  width: 70%;
  margin: 60px auto 0;
  
}
.form_box{
  display: flex;
  justify-content: center;
  padding-top: 38px;
  flex-wrap: wrap;
}
.from-sub-title{
  width:90%;
  padding:2px 0 24px;
  font-size: 16px;
  font-weight: bold;
}
.footer-wrap{
  align-items: center;
    background-color: #fff;
    border-top: 1px solid #e8e8e8;
    bottom: 0;
    box-shadow: 0 -15px 10px -15px #e8e8e8;
    display: flex;
    left: 0;
    min-height: 60px;
    padding: 20px 30px 20px 20px;
    position: fixed;
    width: 100%;
    justify-content: end;
    z-index: 4;
}
.click_a{
  color:#409eff;
}
.product-type{
  border: 1px solid #ccc;
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 20px;
  position: relative;
  text-align: center;
  width: 130px;
  margin-right:10px;
  .main-title {
    color: #000;
    font-size: 14px;
  }
  .sub-title {
    font-size: 12px;
    color:#aaa
  }
  .checked-icon {
    position: absolute;
    bottom: 2px;
    color: #fff;
    right: 2px;
    z-index: 11;
    display:none;
  }
}
.product-type.active{
  background-color: #f6f6fd;
  border: 1px solid #4a89f0;
  .main-title {
    color: #4a89f0;
  }
  .checked-icon {
    display: flex;
    z-index: 12;
  }
}
.product-type.active:after {
    border-bottom: 0 solid #0000;
    border-right: 30px solid #4a89f0;
    border-top: 30px solid #0000;
    bottom: 0;
    content: "";
    display: block;
    position: absolute;
    right: 0;
    z-index: 10;
}

.user_info_box{
  display: flex;
}
.user_info_headImg{
  width: 80px;
  height: 80px;
  margin-right: 10px;
}
.user_info{
  flex: 1;
}
.flex_items_box{
  display: flex;
  align-items: center;
}
</style>